<template>
	<div class="wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
		<basic-opt :has_left="true">
			<template #search>
				<div class="opt-item">
					<el-input class="w-ipt" placeholder="请输入帐号进行筛选" suffix-icon="el-icon-search" v-model="search.username"
						@keydown.enter="getSearchData" size="medium">
					</el-input>
				</div>
				<div class="opt-item">
					<el-button @click="getSearchData" size="medium">搜索</el-button>
				</div>
				<div class="opt-item">
					<reset-search></reset-search>
				</div>
			</template>
			<template #add>
				<div class="opt-item">
					<el-button @click="addForm" icon="el-icon-circle-plus-outline" type="primary" size="medium">添加管理者</el-button>
				</div>
			</template>
		</basic-opt>

		<div class="table-box">
			<el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="table_max_height">
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="username" label="账号"></el-table-column>
				<el-table-column prop="role.name" label="角色名"></el-table-column>
				<el-table-column prop="created_at" label="创建时间"></el-table-column>
				<el-table-column fixed="right" label="操作" width="200">
					<template #default="scope">
<!--						<el-button @click="onEditData(scope.row)" type="success" plain size="mini">编辑</el-button>-->
						<el-button @click="onResetManagePwd(scope.row)" type="info" plain size="mini">重置密码</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<page-component @pageChanged="onPageChanged"></page-component>

		<!-- 添加管理者 -->
		<compoment-drawer :drawer_name="drawer_name" :drawer_form="drawer_form" @getDrawerForm="getDrawerForm">
			<el-form ref="form" :model="form" label-width="120px">
				<el-scrollbar height="80vh" v-loading="form_loading" element-loading-text="正在进行请求,请稍后"
					element-loading-spinner="el-icon-loading">
					<div class="form-flex">
						<el-form-item label="账号" prop="username">
							<el-input class="w-ipt" v-model="form.username" placeholder="请输入账号"></el-input>
						</el-form-item>
						<el-form-item label="输入密码" prop="password">
							<el-input class="w-ipt" v-model="form.password" placeholder="请输入密码" type="password">
							</el-input>
						</el-form-item>
						<el-form-item label="角色名" prop="role_id">
							<role-component :role_id="form.role_id" @getRoleId="getRoleId"></role-component>
						</el-form-item>
					</div>
					<el-form-item label="选择社区" prop="area_id">
						<area-component :area_id="form.area_id" @getAreaId="getAreaId">
						</area-component>
					</el-form-item>
				</el-scrollbar>
				<submit-reset @getChildNewForm="getNewForm" @getChildResetForm="resetForm('form')">
				</submit-reset>
			</el-form>
		</compoment-drawer>

		<el-dialog title="重置密码" v-model="resetpwd" width="40%" :show-close="false">
			<reset-password :userInfo="userInfo" @getChildNewPwd="getNewPwd" @getChildConfirmPwd="getConfirmPwd">
			</reset-password>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="resetpwd = false">取 消</el-button>
					<el-button type="primary" @click="confirmResetPwd">确定更改</el-button>
				</span>
			</template>
		</el-dialog>

	</div>

  <!--  mobile  -->
  <div class="mobile-wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
    <div class="mobile-search-box">
      <el-input class="w-ipt" placeholder="请输入帐号进行筛选" suffix-icon="el-icon-search" v-model="search.username"
                @keydown.enter="getSearchData" size="medium">
      </el-input>
      <el-button @click="getSearchData" size="medium">搜索</el-button>
    </div>
    <div class="moblie-table-box">
      <el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="mobile_table_max_height">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="username" label="账号"></el-table-column>
        <el-table-column prop="role.name" label="角色名"></el-table-column>
        <el-table-column prop="created_at" label="创建时间"></el-table-column>
      </el-table>
    </div>
    <page-component @pageChanged="onPageChanged"></page-component>
  </div>
</template>

<script>
	import API from '@/api/login.js'
	import RoleComponent from '@/components/form/role-component.vue'
	import AreaComponent from '@/components/form/area-component.vue'
	import ResetPassword from '@/components/form/reset-password.vue'
	import mixin from '@/mixin.js'

	export default {
		name: 'manage',
		mixins: [mixin],
		components: {
			RoleComponent,
			AreaComponent,
			ResetPassword
		},
		data() {
			return {
				search: {
					username: ''
				},
				// 表单
				drawer_name: '添加帐号',
				form_loading: false, // 表单填写时加载
				form: {
					username: '',
					password: '',
					role_id: '',
					area_id: ''
				},
				resetpwd: false,
				userInfo: {
					new_password: '', // 新密码
					confirm_password: '', // 旧密码
				},

			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			async getData() {
				let self = this;
				self.loading = true;
				try {
					let params = {
						username: self.search.username ? self.search.username : ''
					};
					self.addPageInfo(params);
					let res = await API.users(params.pageNumber, params.pageSize, params.username);
					self.loading = false;
					self.onGotPageData(res);
				} catch (err) {
					self.loading = false;
				}
			},
			// 编辑数据
			onEditData(row) {
				let self = this;
				self.drawer_form = true;
				self.form = {
					id: row.id,
					username: row.username,
					password: '',
					role_id: row.role ? row.role.id : '',
					area_id: row.area_id
				}
			},
			// 重置密码
			onResetManagePwd(row) {
				let self = this;
				self.userInfo.user_id = row.id;
				self.resetpwd = true;
			},
			getNewPwd(data) {
				let self = this;
				self.userInfo.new_password = data.child_new_pwd;
			},
			getConfirmPwd(data) {
				let self = this;
				self.userInfo.confirm_password = data.child_confirm_pwd;
			},
			// 确定重置
			confirmResetPwd() {
				var self = this;
				if (!self.userInfo.new_password || !self.userInfo.confirm_password) {
					self.$message.error('请填写密码');
					return false;
				}
				if (self.userInfo.new_password === self.userInfo.confirm_password) {
					API.modifyPassword(self.userInfo).then(res => {
						console.log(res)
						self.$message.success('修改成功');
						self.getManage();
						self.userInfo = {};
						self.resetpwd = false;
					})
				} else {
					self.$message.error('新密码与确认密码不一致');
				}
			},
			getAreaId(data) {
				let self = this;
				self.form.area_id = data.area_id;
			},
			// 获取角色id
			getRoleId(data) {
				let self = this;
				self.form.role_id = data.child_role_id;
			},
			
			// 提交表单
			getNewForm() {
				let self = this;
				self.form_loading = true;
				API.user(self.form).then(res => {
					console.log(res)
					self.submitSuccess();
					self.drawer_form = false;
					self.form_loading = false;
					self.getData();
					self.initForm();
				}).catch(err => {
					self.form_loading = false;
					self.$message.error(err.response.data.message);
				});
			},
			initForm() {
				let self = this;
				self.form = {
					username: '',
					password: '',
					role_id: '',
					area_id: ''
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.m-top {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 8px;
		background-color: #f0f0f0;

		.m-box {
			margin-right: 10px;
		}
	}

	.table-box {
		margin: 10px 0;
	}

	.m-pagination {
		padding: 20px 0;
		text-align: center;
	}

	.m-form {
		margin: 20px;
	}

	.u-drawer-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		font-size: 24px;
	}
</style>
